<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.min.css">
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>
<body>
<div style="margin-top: 10px;"></div>

<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">中继列表</li>
        <li>添加中继</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">

            <div class="am-g">
                <div class="am-u-sm-3 am-u-sm-offset-9 am-text-right am-u-end">
                    <div class="am-input-group am-input-group-sm">
                        <input id="i_search" type="text" class="am-form-field am-input-sm" placeholder="输入部门名称"/>
                        <span class="am-input-group-btn">
                            <button class="am-btn  am-btn-primary am-btn-sm am-icon-search" type="button" onclick="buttonQuery();"></button>
                        </span>
                    </div>
                </div>
            </div>

            <div style="margin-top: 10px;"></div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <table class="am-table am-table-bordered
                    am-table-radius am-table-striped am-scrollable-horizontal
                    am-table-compact">
                        <thead>
                        <tr style="text-align: center">
                            <td width="10%">中继编号</td>
                            <td width="20%">设备编号</td>
                            <td width="10%">部门</td>
                            <td width="10%">状态</td>
                            <td width="15%">产商</td>
                            <td width="15%">版本</td>
                            <td width="10%">出产日期</td>
                            <td width="10%">添加时间</td>

                        </tr>
                        </thead>
                        <tbody id="i_tbody">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <div class="am-u-sm-4 am-u-sm-offset-8 am-cf am-padding-horizontal-0">
                        <ul id="i_ul_page" class="am-pagination tpl-pagination am-fr am-margin-horizontal-0">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div class="am-g">
                <form class="am-form am-form-horizontal">
                    <div class="am-form-group">
                        <label for="i_deviceId" class="am-u-sm-2 am-form-label">设备编号</label>
                        <div class="am-u-sm-6 am-u-end">
                            <input type="text" id="i_deviceId" placeholder="输入设备编号">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="i_state" class="am-u-sm-2 am-form-label">状态</label>
                        <div class="am-u-sm-6 am-u-end">
                            <input type="text" id="i_state" placeholder="输入状态">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="i_maker" class="am-u-sm-2 am-form-label">产商</label>
                        <div class="am-u-sm-6 am-u-end">
                            <input type="text" id="i_maker" placeholder="输入产商">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="i_version" class="am-u-sm-2 am-form-label">版本</label>
                        <div class="am-u-sm-6 am-u-end">
                            <input type="text" id="i_version" placeholder="输入版本">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="i_productionDate" class="am-u-sm-2 am-form-label">出产日期</label>
                        <div class="am-u-sm-6 am-u-end">
                            <input type="text" id="i_productionDate" placeholder="输入出产日期" data-am-datepicker>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <div class="am-u-sm-6 am-u-sm-offset-2">
                            <button class="am-btn am-btn-default" onclick="add();">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>


    </div>
</div>
<div></div>

<script src="/assets/amazeui/js/jquery-3.2.0.min.js"></script>
<script src="/assets/layui/layui.js"></script>

<script>
    layui.use(['element','layer'], function() {
        var $ = layui.jquery;
        var element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
    });

    var rows = 10;

    loadTable(1);

    function add() {
        var deviceId = $("#i_deviceId").val();
        var state = $("#i_state").val();
        var maker = $("#i_maker").val();
        var version = $("#i_version").val();
        var productionDate = $("#i_productionDate").val();

        $.ajax({
            type: 'post',
            url: '/sys/relay/add',
            data: {
                deviceId: deviceId,
                state: state,
                maker: maker,
                version: version,
                productionDate: productionDate
            },
            dataType: 'json',
            success: function(result){

                if(result.code==0){
                    alert(result.sucMsg);
                }else{
                    alert(result.errMsg);
                }
                loadTable(1);
            }
        });
    }


    function loadTable(page) {
        $.ajax({
            type: 'post',
            url: '/sys/relay/queryList',
            data: {
                page: page,
                rows: rows
            },
            dataType: 'json',
            success: function(result){
                if(result && result.rows){

                    $("#i_tbody").html('');
                    $.each(result.rows,function(index,obj){

                        var tr = $("<tr><td>"+obj.relayId+"</td>"+
                                "<td >"+obj.deviceId+"</td>" +
                                "<td>"+obj.deptName+"</td>" +
                                "<td>"+obj.state+"</td>" +
                                "<td>"+obj.maker+"</td>" +
                                "<td>"+obj.version+"</td>" +
                                "<td>"+obj.productionDate+"</td>" +
                                "<td>"+obj.createTime+"</td>" +
                                "</tr>");
                        $("#i_tbody").append(tr);
                    });
                    var total = result.total;
                    var pages = Math.ceil(total/rows);

                    console.info(pages);
                    createpages(page,pages);
                }
            }
        });
    }

    function createpages(pageNow,total) {

        $("#i_ul_page").html("");
        var preli;
        if(pageNow==1){
            preli = $("<li class='am-disabled'><a href='#'>«</a></li>")
        }else{
            preli = $("<li><a href='javascript:loadTable(1);'>«</a></li>")
        }
        $("#i_ul_page").append(preli);

        if(total<=5){
            for(var i=1;i<=total;i++){
                var li;
                if(i==pageNow){
                    li = $("<li class='am-active'><a href='#'>"+i+"</a></li>")
                }else{
                    li = $("<li><a href='javascript:loadTable("+i+");'>"+i+"</a></li>")
                }
                $("#i_ul_page").append(li);
            }
        }else{
            //画前面5个
            if(pageNow<=3){
                for(var i=1;i<=5;i++){
                    var li;
                    if(i==pageNow){
                        li = $("<li class='am-active'><a href='#'>"+i+"</a></li>")
                    }else{
                        li = $("<li><a href='javascript:loadTable("+i+");'>"+i+"</a></li>")
                    }
                    $("#i_ul_page").append(li);
                }

            }
            //画后面5个
            else if((pageNow+2)>=total){
                for(var i=(total-4);i<=total;i++){
                    var li;
                    if(i==pageNow){
                        li = $("<li class='am-active'><a href='#'>"+i+"</a></li>")
                    }else{
                        li = $("<li><a href='javascript:loadTable("+i+");'>"+i+"</a></li>")
                    }
                    $("#i_ul_page").append(li);
                }
            }
            //画中间5个
            else{
                li1 = $("<li><a href='javascript:loadTable("+(pageNow-2)+");'>"+(pageNow-2)+"</a></li>")
                li2 = $("<li><a href='javascript:loadTable("+(pageNow-1)+");'>"+(pageNow-1)+"</a></li>")
                li3 = $("<li class='am-active'><a href='#'>"+pageNow+"</a></li>")
                li4 = $("<li><a href='javascript:loadTable("+(pageNow+1)+");'>"+(pageNow+1)+"</a></li>")
                li5 = $("<li><a href='javascript:loadTable("+(pageNow+2)+");'>"+(pageNow+2)+"</a></li>")
                $("#i_ul_page").append(li1);
                $("#i_ul_page").append(li2);
                $("#i_ul_page").append(li3);
                $("#i_ul_page").append(li4);
                $("#i_ul_page").append(li5);
            }
        }


        var sufli;
        if(pageNow==total){
            sufli = $("<li class='am-disabled'><a href='#'>»</a></li>")
        }else{
            sufli = $("<li><a href='javascript:loadTable("+total+");'>»</a></li>")
        }
        $("#i_ul_page").append(sufli);
    }

</script>
</body>
</html>